<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Window Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Window Layout</h2>
<div class="demo-info">
    <div class="demo-tip icon-tip"></div>
    <div>Using layout on window.</div>
</div>
<div style="margin:10px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
<div id="w" class="easyui-window" title="Window Layout" data-options="iconCls:'icon-save'"
     style="width:500px;height:200px;padding:5px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'east',split:true" style="width:100px"></div>
        <div data-options="region:'center'" style="padding:10px;">
            jQuery EasyUI framework help you build your web page easily.
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)"
               onclick="javascript:alert('ok')">Ok</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)"
               onclick="javascript:alert('cancel')">Cancel</a>
        </div>
    </div>
</div>

</body>
</html>